<template>
	<view class="curriculum-page">
		<image class="curriculum-page__bg" src="/static/images/bg/curriculum.png" mode=""></image>
		<view class="curriculum-page__button-group">
			<view class="curriculum-page__button" v-for="item in list" :key="item.id" @click="onClick(item)">
				<image class="curriculum-page__button-image" src="/static/images/btn/curriculum.png"></image>
				<view class="curriculum-page__button-label">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1,
					name: '加载中...',
				}, ],
			};
		},
		created() {
			uni.request({
				url: getApp().globalData.baseUrl + 'static/php/curriculum.php?id=' + this.$route.query.id,
				success: (res) => {
					this.list = res.data.list;
				},
			});
		},
		methods: {
			onClick(item) {
				this.$store.commit('saveCurriculum', item.name);
				uni.navigateTo({
					url: `../teacher/teacher?id=${item.id}&data=${this.$store.getters.data}`,
				});
			},
		},
	}
</script>

<style lang="scss">
	.curriculum-page {
		&__bg {
			width: 100vw;
			height: imageSize(100vw, 750, 2031);
		}

		&__button-group {
			position: absolute;
			top: 45vw;
		}

		&__button {
			text-align: center;
			position: relative;
			float: left;
		}

		&__button-image {
			width: 50vw;
			height: imageSize(50vw, 353, 204);
		}

		&__button-label {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 35upx;
			font-weight: bolder;
			color: #124a8e;
		}
	}
</style>
